<template>
  <view>
    <u-navbar
        title="选择订单"
        placeholder
        titleStyle="color:black"
        leftIconColor="#000"
        auto-back
        bgColor="#FDE52F">
    </u-navbar>
    <view v-for="(item, index) in dataList" :key="index" class="orderList" style="padding-top: 20rpx">
      <view class="item_root" @click="selectOrder(item)">
        <view class="dianji">
          <image v-if="item.isSelector" class="check_icon"
                 :src="BaseImgUrl + '/images/select_fill.png'"></image>
          <view v-else class="check_icon"
                style="background-color: #DEDEDE;border-radius: 300rpx;width: 38rpx;height: 38rpx"></view>
        </view>
        <view class="listOrder">
          <!-- top -->
          <view class="listTop">
            <view class="listLeft">
              <view>
                <view class="shop_type" v-if="item.type === 1">美团</view>
                <view class="elemtag" v-if="item.type === 2">饿了么</view>
              </view>
              <view class="listTitile" style="flex:1;">
                <text>{{ item.shop_name }}</text>
              </view>
            </view>
            <view class="listRight">
              <text v-if="item.status === 0 && item.is_cancel === 0 && item.check_status > 0">进行中</text>
              <text v-if="item.status === 0 && item.is_cancel === 0 && item.check_status === 0">进行中</text>
              <text v-if="item.status === 0 && item.now > item.end_time">已失效</text>
              <text v-if="item.status === 1 && item.is_cancel === 0">待审核</text>
              <text v-if="item.status === 4 && item.is_cancel === 0">等待商家付款</text>
              <text v-if="item.status === 2 && item.is_cancel === 0">驳回可提交</text>
              <text v-if="item.status === 5 && item.is_cancel === 0">减免成功</text>
              <text v-if="item.is_cancel === 1 && item.status === 2">驳回超时已过期</text>
              <text v-if="item.is_cancel === 1  && item.status !== 2">过期或已取消</text>
              <text v-if="item.status === 3 && item.is_cancel === 0">驳回不可提交</text>
            </view>
          </view>
          <!--content-->
          <view class="content">
            <view class="content_header">
              <image v-if="item.logo" :src="item.logo.startsWith('http') ? item.logo : BaseURL + item.logo"></image>
              <image v-if="!item.logo"
                     src="https://img.alicdn.com/imgextra/i2/3829152210/O1CN01ZEkb1x1SCE3sKyaNT_!!3829152210.png"
                     style="border-radius: 20rpx;"></image>
            </view>
            <view class="content_time">
              <text>最低消费：{{ item.min_charge ? item.min_charge : 0 }}元</text>
              <text>减免金额：{{ item.rake_back_amount ? item.rake_back_amount : 0 }}元</text>
              <text>参与时间：{{ item.create_time ? item.create_time : '未记录时间' }}</text>
            </view>
          </view>
          <!--pingjia_box-->
          <view class="pingjia_box">
            <view class="pingjia">
              <view>订单号: {{item.user_pay_order_no}}</view>
            </view>
            <view class="pingjia">
              <view>减免规则:</view>
              <view>
                <text class="choice_right">
                  超级会员
                  <text v-if="item['min_charge'] !== 0">满
                    <text style="color:#F97632">{{ item['min_charge'] }}</text>
                    减
                    <text style="color:#F97632">{{ item['member_rebate_amount'] }}</text>
                  </text>
                </text>
                <text class="choice_right">
                  非会员
                  <text v-if="item['min_charge'] !== 0">满
                    <text style="color:#F97632">{{ item['min_charge'] }}</text>
                    减
                    <text style="color:#F97632">{{ item['rebate_amount'] }}</text>
                  </text>
                </text>
              </view>
            </view>
            <view class="pingjia">
              <view>商家留言:</view>
              <view>{{ item.activity_ask }}</view>
            </view>
          </view>
          <!--        <view v-if="item.status === 2" class="pingjia_box bohui_bg">-->
          <!--          <view class="pingjia">-->
          <!--            <view>驳回原因 : {{ item.check_refuse_reason }}</view>-->
          <!--          </view>-->
          <!--        </view>-->
        </view>
      </view>
    </view>
    <view style="background-color: #FFFFFF">
      <u-safe-bottom></u-safe-bottom>
    </view>
  </view>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {linkOrderAPI} from "../../services/order";
import {BaseImgUrl, BaseURL} from "../../utils/lshttp";

// 获取数据传输对象
const instance = getCurrentInstance().proxy
// 当前数据源
const dataList = ref([])

onLoad(async () => {
  // 获取订单数据
  const orderList = await linkOrderAPI()
  dataList.value = orderList.result
})
// 选择订单
const selectOrder = (item) => {
  // 所有订单设置成未选择状态
  dataList.value.forEach((itemAll) => {
    itemAll.isSelector = false
  })
  // 当前订单设置为选择状态
  item.isSelector = true
  // 传输数据
  const eventChannel = instance.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {
    // 选择的订单号
    data: {order_no: item.user_pay_order_no}
  });
  uni.navigateBack()
}
</script>
<style lang="scss">
page {
  background-color: #F6F6F6;
}
</style>

<style scoped lang="scss">
.dianji {
  margin-left: auto;

  .check_icon {
    width: 36rpx !important;
    height: 36rpx !important;
  }
}

.bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
}

.listTitile {
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item_root {
  background-color: white;
  margin: 0 20rpx;
  padding: 16rpx 16rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 10rpx;

  .content {
    flex: 1;
    margin-left: 20rpx;


    .sub_title1 {
      margin-top: 10rpx;
      font-size: 20rpx;
      color: #666666;
    }

    .center {
      display: flex;
      align-items: center;
      margin: 6rpx 0;

      .sub_title_label {
        font-size: 20rpx;
        color: white;
        background-color: #1db9ff;
        padding: 4rpx 10rpx;
        border-radius: 60rpx;
        margin-right: 10rpx;
      }

      .sub_title_label1 {
        font-size: 20rpx;
        color: #333333;
        background-color: #FECC32;
        padding: 4rpx 10rpx;
        border-radius: 60rpx;
        margin-right: 10rpx;
      }

      .sub_title {
        font-size: 22rpx;
        color: #F9661C;
      }
    }
  }

  .title {
    font-size: 26rpx;
    font-weight: bold;
    color: black;
    min-height: 60rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .icon-pic {
    width: 148rpx;
    height: 148rpx;
    margin: 0 10rpx;
    border-radius: 16rpx;
  }

  .end_content {
    font-size: 28rpx;
    color: #F9661C;
    min-width: 100rpx;
    margin-left: 2rpx;
    text-align: center;

    .end_title {
      margin: auto;
      font-weight: bold;
    }
  }
}

.listTop {
  width: 100%;
  height: 88rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 20rpx;
}

.listOrder {
  width: 601rpx;
  margin: 0 auto;
}

.listLeft {
  display: flex;
  align-items: center;
  flex: 1;
}

.shop_type {
  background-color: #FECC32;
  color: #333333;
  border-radius: 8rpx;
  font-size: 24rpx;
  text-align: center;
  padding: 2rpx 10rpx;
  margin-right: 10rpx;
  flex: 1;
}

.elemtag {
  background-color: #17aeff;
  color: #ffffff;
  border-radius: 8rpx;
  font-size: 24rpx;
  text-align: center;
  padding: 2rpx 10rpx;
  margin-right: 10rpx;
  flex: 1;
}

.listRight {
  float: right;
  font-size: 24rpx;
  color: #999999;
  line-height: 88rpx;

  .time_d {
    font-size: 26rpx;
    color: #FF3819;
    font-weight: bold;
  }
}

/* content */
.content {
  width: 100%;
  height: 163rpx;
}

.content_header {
  float: left;
  margin: 21rpx 17rpx 0 0;
  overflow: hidden;
  width: 120rpx;
  height: 120rpx;
  border: 1rpx solid #eee;
  border-radius: 20rpx;
}

.content_header image {
  width: 120rpx;
  height: 120rpx;
}

.content_time {
  display: inline-block;
}

.content_time text:first-child {
  margin-top: 26rpx;
  font-size: 24rpx;
  color: #111111;
}

.content_time text {
  line-height: 40rpx;
  display: block;
  font-size: 24rpx;
  color: #111111;
}

.pingjia_box {
  width: 100%;
  //height: auto;
  background-color: #F7F8FA;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 20rpx;
  margin-left: 20rpx;

  .pingjia {
    font-size: 24rpx;
    color: #555;
    line-height: 40rpx;
  }

  .pingjia > view {
    font-size: 24rpx;
    font-weight: bold;
    color: #111111;
  }

  .pingjia > view:nth-child(2) {
    color: #666666;
  }
}

.bohui_bg {
  background-color: #FDEBE4;
  margin-top: 20rpx;
}

.bohui_bg view {
  color: #2194FF;
}
</style>
